import SChart from 'Component/Chart/SChart'

class Circle extends SChart {
  draw(svg) {
    const _x = this._x
    const _y = this._y

    const storkeWidth = 10
    const storkeHalfWidth = storkeWidth / 2

    const allPaths = [
      { color: 'red', rotate: 0 },
      { color: 'green', rotate: 90 },
      { color: 'yellow', rotate: 180 },
      { color: 'blue', rotate: 270 }
    ]

    const path = `
      M ${_x(50)}, ${_y(50)} M ${_x(50)} ${_x(storkeHalfWidth)} 
      A${_x(50-storkeHalfWidth)} ${_y(50-storkeHalfWidth)} 0 0 1 
      ${_x(50 + 45*Math.cos(5*(Math.PI/180)))} 
      ${_y(50 - 45*Math.sin(5*(Math.PI/180)))}
    `
    const g = svg.group()
    for (const p of allPaths) {
      g.path(path).stroke({ width: _x(storkeWidth), color: p.color })
        .fill('transparent').transform({
          rotate: p.rotate, origin: [this._x(50), this._y(50)]
        }
      )
    }
    g.animate({
      duration: 2000,
      when: 'now',
      swing: false,
      times: 1000
    }).ease('-').rotate(360)
  }
}

export default Circle